<template>
  <div class="menu">
    <div class="title">
      智慧点餐
    </div>

    <el-menu 
    router unique-opened active-text-color="#ffd04b" background-color="#2d3a4b" 
     class="el-menu-vertical-demo" default-active="2"
      text-color="#fff" >
      <template v-for="item in menus" >                 
                <el-sub-menu v-if="item.children && item.children.length"   :index="item.path">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{ item.title }}</span>
                    </template>    
                    <el-menu-item  v-for="item1 in item.children" :index="item1.path">{{ item1.title }}</el-menu-item>
                 
                </el-sub-menu>

                <el-menu-item v-else :index="item.path">
                    <el-icon><setting /></el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>

            </template>
    </el-menu>

  </div>
</template>

<script setup>

 import {computed} from 'vue'
    import {useRoute} from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const menus=[
  {
  path:'/home',
  title:'首页',
  icon:'setting'
},
{
  path:'/account',
  title:'账号管理',
  icon:'setting',
  children:[
    {
      path:'/accountList',
      title:'账号列表',
  },
  {
    path:'/accountAdd',
      title:'添加账号',
  },
  {
    path:'/accountCenter',
      title:'个人中心',
  },
  {
    path:'/accountEdit',
      title:'修改账号',
  },
]
},
{
  path:'/goods',
  title:'商品管理',
  icon:'setting',
  children:[{
    path:'/goodsList',
      title:'商品列表',
  },
  {
      path:'/goodsAdd',
      title:'添加商品',
  },
  {
    path:'/goodsType',
      title:'商品类型',
  }
]
},
{
            path:'/orderList',
            title:'订单管理',
            icon:'icon-order'
        },
{
  path:'/shopInfo',
  title:'店铺管理',
  icon:'setting'
},
{
  path:'/statistics',
            title:'统计数据',
            children:[
                {
                    path:'/statisticsOrder',
                    title:'订单统计',
                },
                {
                    path:'/statisticsGoods',
                    title:'商品统计',
                },
            ]
},

]

const ActivePath =  computed(()=>{
    return route.path
 })
</script>

<style scoped>
.menu{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
}
.title {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
</style>